<template xmlns="http://www.w3.org/1999/html">
    <div class="">
        <div class="detail_content">
            <div class="detail_body">
                <ul class="detail_header clearfix">
                    <li>
                        <router-link to="/">首页</router-link>
                        <span>></span></li>
                    <li>
                        <router-link to="/list">返回店铺</router-link>
                        <span>></span></li>
                    <!--                    <li>领克教育系统</li>-->
                    <li>{{classData.title}}</li>
                </ul>
                <div class="clearfix">
                    <div class="video_box">
                        <div class="detail_view">
                            <div>

                                <img :src="classData.img" style="width: 600px;height: 295px"/>

                            </div>
                        </div>
                    </div>
                    <div class="view_info">
                        <p>
                            商品详情
                        <div class="study_num">
                                    <span class="iconfont mgr10">
                                        成交量:{{sellNum}}&#xe60a;
                                    </span>
                        </div>
                        <!--                        <p>领课教育系统</p>-->
                        <div class="view_price">
                            <div>
                                商品价格:<span>￥{{classData.price}}元</span>
                            </div>
                        </div>
                        <div class="view_teacher">
                            <span class="text_b">
                                商品名称:
                            </span>
                            <span style="color: #ec7e00">{{classData.gname}}</span><br/>
                            <!--                            <span class="text_b">-->
                            <!--                                商品编号:-->
                            <!--                            </span>-->
                            <!--                            <span style="color: #ec7e00">{{classData.id}}</span><br/>-->
                            <span class="text_b">
                                商品描述:
                            </span><br/>
                            <span style="color: #ec7e00;margin-left: 30px">{{classData.remark}}</span><br/>

                            <!--                            <span class="text_b">讲师:</span>{{}}-->
                        </div>
                        <!--                        <div class="view_teacher mgt20">-->
                        <!--                            <span class="text_b">购买人数:</span>{{classData.buyCount}} 人-->
                        <!--                        </div>-->


                        <div class="foot_box">

                            <!--                            <button class="buy_btn">登录观看</button>-->

                            <div @click="changeShouCang">
                                <span v-if="shouChangStatus===0">
                                    <a href="javascript:" class="collect_btn">
                                        <span class="iconfont" style="color: yellow"></span>
                                        &nbsp;已收藏
                                    </a>
                                </span>
                                <span v-if="shouChangStatus===1">
                                    <a href="javascript:" class="collect_btn">
                                        <span class="iconfont"></span>
                                        &nbsp;未收藏
                                    </a>
                                </span>
                            </div>


                            <div>

                                <!--                                <button class="buy_btn"  @click="boFang">学习/暂停</button>-->
                                <!--                                >立即观看</button>-->
                                <button class="buy_btn" style="margin-left: 0px" id="buyBtn" @click="buyCourse">立即购买
                                </button>

                            </div>

                            <el-dialog title="收银台" :visible.sync="dialogFormVisible" width="600px">
                                <div data-v-1ee14d65="" style="height: 420px;margin: auto">
                                    <table data-v-1ee14d65="" class="table" style="width: 550px;">
                                        <tr data-v-1ee14d65="">
                                            <th data-v-1ee14d65="" width="250px">商品名称</th>
                                            <th data-v-1ee14d65="">商品价格</th>
                                        </tr>
                                        <tr data-v-1ee14d65="">
                                            <td>
                                                <div>
                                                    {{classData.gname}}<br>
                                                    <img :src="classData.img"
                                                         style="width: 108px;height: 80px">
                                                </div>
                                            </td>
                                            <td data-v-1ee14d65="" class="c_orange" style="font-size: 30px">
                                                ¥{{classData.price*payForm.num}}
                                            </td>
                                        </tr>
                                    </table>
                                    <div data-v-1ee14d65="" class="remark" style="margin-top: 23px;padding-left: 75px">
                                        <el-form ref="form" :model="payForm">
                                            <label data-v-1ee14d65="" style="font-family: 幼圆;font-size: 15px">请选择购买数量:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            <el-input-number size="small" :min="1" :max="stockNum"
                                                             style="margin-top: 5px"
                                                             v-model="payForm.num" @change="handleChange"
                                                             label="描述文字"></el-input-number>
                                            <span style="font-size: 13px;margin-left: 20px;font-family: 幼圆">
                                                {{classData.unit.unitname}}
                                                <span style="color:red;margin-left: 20px">
                                                    库存剩余量:{{stockNum}}
                                                </span>
                                            </span><br/><br>
                                            <label data-v-1ee14d65="" style="font-family: 幼圆;font-size: 15px">请选择收获地址:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            <el-select size="small" v-model="payForm.addrid" placeholder="请选择收货地址"
                                                       clearable filterable>
                                                <el-option
                                                        v-for="item in addrForm"
                                                        :key="item.id"
                                                        :label="item.addr"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                            <el-link type="primary"
                                                     href="http://localhost:8080/geRenCenter"
                                                     style="font-family: 幼圆;font-size: 15px;margin-left: 20px">点我添加新的地址
                                            </el-link>
                                        </el-form>
                                    </div>
                                    <button class="buy_btn" style="margin-left: 100px;margin-top: 41px;"
                                            @click="choosePay">立即购买
                                    </button>
                                    <button class="buy_btn" @click="addCart">加入购物车</button>

                                </div>
                                <!--                                </div>-->
                            </el-dialog>
                            <!--                            微信支付-->
                            <!--支付弹出层-->
                            <el-dialog
                                    title="请选择支付类型"
                                    :visible.sync="payDialogVisible"
                                    width="50"
                                    @close="aboutpay">
                                <!--支付宝和微信选择-->
                                <div style="height: 520px;margin-top: 20px;margin-left: 100px">
                                    <el-button @click="alipay">
                                        <img style="padding: 0" width="200px" height="60"
                                             src="">
                                    </el-button>
                                    <el-button @click="weixinpay">
                                        <img width="200px" height="60"
                                             src="">
                                    </el-button>
                                    <span id="weixin"
                                          style="display: inline-block;margin-left: 60px;border: 2px solid lightgrey">
                                    </span><br>
                                    <div style="margin-top: 25px;font-family: 幼圆;font-size: 15px">
                                        请扫描下方二维码支付:<br>
                                        (请在30分钟内完成支付,超时则订单无效)
                                    </div>
                                    <div style="border: 2px solid lightslategrey;width: 490px;height: 349px">
                                        <vue-qr v-if="this.payStatus===0"
                                                style="padding-left:10px;padding-left: 86px;width: 300px;margin-top: 27px; "
                                                :text="payResult.codeUrl"
                                                :margin="0"
                                                colorDark="green"
                                                :logoSrc="require('/src/assets/img/wx.jpg')"
                                                colorLight="#fff"
                                                :size="200">
                                        </vue-qr>
                                        <vue-qr
                                                v-if="this.payStatus===1"
                                                style="padding-left:10px;padding-left: 86px;width: 300px;margin-top: 27px; "
                                                :text="payResultAli.codeUrl"
                                                :margin="0"
                                                colorDark="blue"
                                                :logoSrc="require('/src/assets/img/ali.png')"
                                                colorLight="#fff"
                                                :size="200">
                                        </vue-qr>
                                    </div>
                                </div>
                            </el-dialog>
                            <el-dialog
                                    title="订单提示"
                                    :visible.sync="orderDialogVisible"
                                    width="30%">
                                <span style="font-family: 幼圆;font-size: 15px">
                                    当前支付尚未完成,若当前页面意外关闭,该订单将自动保存到<br>
                                    <span style="color:red;">"个人中心->我的订单"</span>中,可在我的订单中继续完成支付<br>
                                    确认要关闭当前订单吗?
                                </span>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="quxiaoOrder">取 消</el-button>
                                    <el-button type="primary" @click="closeOrder">确 定</el-button>
                                </span>
                            </el-dialog>

                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import vueQr from 'vue-qr'

    export default {
        name: "Display",
        // props:['classData','ChildId'],
        props: {
            classData: {
                type: Object,
            },
        },
        components: {
            vueQr
        },
        data() {

            return {
                orderDialogVisible: false,
                //得到响应的结果
                payResult: {
                    codeUrl: "", //二维码的地址
                    code: "", //订单号
                    logoSrc: "/src/assets/img/美女.jpg" //微信二维码中间小logo
                },
                //得到响应的结果
                payResultAli: {
                    codeUrl: "", //二维码的地址
                    code: "", //订单号
                    logoSrc: "/src/assets/img/ali.png" //微信二维码中间小logo
                },
                payStatus: null,
                //支付类型单选按钮
                radio: "",
                //支付弹出层
                payDialogVisible: false,
                //当前用户所有的收获地址数据
                addrForm: [],
                //交易数据表单
                payForm: {
                    num: 1,
                },
                //商品成交量
                sellNum: 0,
                // isTitileUpdate:false,
                myid: "",
                dialogFormVisible: false,
                HuiYuanId: window.sessionStorage.getItem("memberId"),
                //是否为讲师
                TeacherId: window.sessionStorage.getItem("isTeacher"),
                mobileId: window.sessionStorage.getItem("mobile"),
                //    订单数据
                orderData: [],
                // payType:[],
                payType: '',
                //图片
                AllImg: [],
                timer1: '',
                dialogVisible: false, //弹出框

                //    是否购买(状态)
                playStatus: 0,
                //    支付宝状态
                ZhiFuBaoStatus: false,
                //订单号
                order_no: this.$route.query.out_trade_no,
                //    收藏状态:
                shouCangStatus: 0,
                //  收藏的实体类
                shouChangData: {
                    courseid: this.$route.params.id,
                    memberid: window.sessionStorage.getItem("memberId"),
                    //
                },
                MemberStatus: 0,
                shouChangStatus: 0,

                //查询支付状态定时器
                timer: "",
                //库存余量
                stockNum: 0,
            }
        },
        created() {
            // console.log(sessionStorage.getItem("mobile"))
            this.myid = this.$route.params.id
            // console.log(this.isTitileUpdate)
            this.IsShouChang();
            //获取商品的成交量
            this.getSellNum();
            this.IsShouChang();
            //获取当前用户所有的地址
            this.getAddr();
            //查询当前商品库存余量
            this.getStock();

        },
        watch: {
            "$router.path": "IsShouChang"
        },

        methods: {
            //加入购物车
            addCart() {
                if (this.payForm.addrid != null && this.payForm.addrid!=="") {
                    this.payForm.goodsId = this.$route.params.id
                    this.payForm.price = this.classData.price*this.payForm.num
                    this.$http.post("order/cart/addCart", this.payForm).then(res => {
                        if (res.data.code === 2000) {
                            this.$message.success(res.data.msg)
                        }
                        if (res.data.code === 6000) {
                            this.$message.error(res.data.msg);
                        }
                    })
                }else {
                    this.$message.warning("请选择收货地址后再添加到购物车")
                }
            },
            //取消关闭
            quxiaoOrder() {
                this.orderDialogVisible = false;
                this.payDialogVisible = true;
            },
            //关闭支付页面
            closeOrder() {
                //消除定时器
                clearInterval(this.timer);
                this.timer = null;
                this.orderDialogVisible = false;
                this.payDialogVisible = false;
                this.dialogFormVisible = false;
                this.payResultAli.code = ""
                this.payResult.code = ""
                this.payForm.code = ""
            },
            //查询当前商品库存余量
            getStock() {
                this.$http.post("order/stock/getStock/" + this.$route.params.id).then(res => {
                    if (res.data.code === 2000) {
                        this.stockNum = res.data.data;
                    }
                })
            },
            //关闭支付弹出层
            aboutpay() {
                if (this.payResult.codeUrl==="" && this.payResultAli.codeUrl==="" || this.payResult.codeUrl===null && this.payResultAli.codeUrl===null){

                }else {
                    this.orderDialogVisible = true;
                }
            },
            //支付状态
            queryPayStatus(code) {
                //继续支付
                var that = this;
                this.$http.get("order/payLog/paystatus/" + code).then(r => {
                    if (r.data.code === 2000) {
                        this.payResult.codeUrl = "",
                        this.payResultAli.codeUrl = "",
                        clearInterval(this.timer);
                        //如果支付成功，清除定时器
                        that.$message.success(r.data.msg);
                        //消除定时器
                        clearInterval(this.timer);
                        that.timer = null;
                        that.payDialogVisible = false;
                        that.dialogFormVisible = false;

                        //刷新界面
                        that.initOrderList();
                    }
                })
            },
            //生成支付二维码
            weixinpay() {
                clearInterval(this.timer);
                this.timer = null;
                this.payStatus = 0;
                if (this.payResult.codeUrl !== '') {
                    //定时器
                    this.timer = setInterval(() => {
                        this.queryPayStatus(this.payResult.code);
                    }, 6000)
                    return
                }
                this.payForm.goodsid = this.$route.params.id
                this.payForm.price = this.classData.price
                this.payForm.bid = this.classData.businessInfo.id
                this.payForm.paysort = this.payStatus
                this.payForm.code = this.payResult.code
                this.$http.post("order/order/buyNow", this.payForm).then(res => {
                    console.log(res.data.data)
                    if (res.data.code === 2000) {
                        this.payResult.codeUrl = res.data.data.codeUrl;
                        this.payResult.code = res.data.data.orderNo;
                        this.payResultAli.code = res.data.data.orderNo;
                        this.payResult.code = res.data.data.orderNo;
                        this.payResult.total_fee = res.data.data.price;
                        //定时器
                        this.timer = setInterval(() => {
                            this.queryPayStatus(this.payResult.code);
                        }, 6000)
                    }else if (res.data.code===5001){
                        this.$message.error(res.data.msg)
                    } else {
                        this.$message.error("当前库存不充足,请更改数量后再尝试")
                    }
                })
            },
            alipay() {
                clearInterval(this.timer);
                this.timer = null;
                this.payStatus = 1;
                if (this.payResultAli.codeUrl !== '') {
                    this.timer = setInterval(() => {
                        this.queryPayStatus(this.payResultAli.code);
                    }, 6000)
                    return;
                }
                this.payForm.goodsid = this.$route.params.id
                this.payForm.price = this.classData.price
                this.payForm.bid = this.classData.businessInfo.id
                this.payForm.paysort = this.payStatus
                this.payForm.code = this.payResultAli.code
                this.$http.post("order/order/buyNow", this.payForm).then(res => {
                    if (res.data.code === 2000) {
                        this.payResultAli.codeUrl = res.data.data.codeUrl;
                        this.payResultAli.code = res.data.data.orderNo;
                        this.payResult.code = res.data.data.orderNo;
                        this.payResultAli.total_fee = res.data.data.price;
                        this.timer = setInterval(() => {
                            this.queryPayStatus(this.payResultAli.code);
                        }, 6000)
                    }else if (res.data.code===5001){
                        this.$message.error(res.data.msg)
                    } else {
                        this.$message.error("当前库存不充足,请更改数量后再尝试")
                    }
                })
            },
            choosePay() {
                if (this.payForm.addrid != null && this.payForm.addrid!=="") {
                    this.payDialogVisible = true;
                } else {
                    this.$message.warning("请选择收货地址后再购买")
                }

            },
            //获取当前用户所有收获地址
            getAddr() {
                this.$http.post("commodity/goods/getAllAddr").then(res => {
                    if (res.data.code === 2000) {
                        this.addrForm = res.data.data;
                    }
                })
            },
            //加减计数器的方法
            handleChange(value) {
                console.log(this.payForm.num);
            },
            //改变收藏状态
            changeShouCang() {
                var status = 0;
                if (this.shouChangStatus === 0) {
                    status = 1;
                }
                this.$http.post("commodity/goods/changeCollectionStatus/" + this.$route.params.id + "/" + status).then(res => {
                    if (res.data.code === 2000) {
                        this.shouChangStatus = res.data.data;
                        this.$message.success(res.data.msg)
                        this.IsShouChang();
                    }
                })
            },
            //获取商品成交量
            getSellNum() {
                this.$http.post("commodity/goods/getGoodsSellNum/" + this.$route.params.id).then(res => {
                    if (res.data.code === 2000) {
                        this.sellNum = res.data.data
                    }
                })
            },
            //渲染页面是否已经收藏
            IsShouChang() {
                var that = this;
                this.$http.post("/commodity/goods/isGoodsCollection/" + this.$route.params.id).then(function (resp) {
                    if (resp.data.code === 2000) {
                        that.shouChangStatus = resp.data.data;
                        // alert(that.shouChangStatus)
                    }

                })
            },
            goLogin() {
                // this.$store.dispatch('REDIRECT_LOGIN');
                this.$router.push({
                    path: '/qianLogin'
                }); //登录
            },
            //请先登录
            buyCourse() {
                var item = sessionStorage.getItem("token");
                // alert(this.playStatus)
                if (item == null) {
                    this.$msgBox({
                        content: '请登录后再购买',
                        isShowCancelBtn: false
                    }).then(() => {
                        this.$router.push({
                            path: '/qianLogin'
                        }); //登录
                    })
                    return
                }
                this.dialogFormVisible = true;

            },
            resetPay() {
                this.payStep = 1;
                this.getOrder(this.payType);
            },
            changePay(int) {
                this.getOrder(int);
                this.submit();
            },
        }
    }
</script>


<style lang="scss" rel="stylesheet/scss">
    .detail_content {
        background: rgb(51, 51, 51);
        height: 398px;

        .detail_body {
            width: 1200px;
            margin: 0 auto;
            height: 373px;
        }
    }

    dialog {
        height: 400px;
    }

    .detail_header {
        li {
            float: left;
            line-height: 57px;
            margin: 0 10px;
            color: #fff;
            font-size: 14px;

            span {
                margin-left: 20px;
            }

            a {
                color: #fff;

                &:hover {
                    text-decoration: none;
                }
            }
        }
    }

    .view_info {
        float: right;
        width: 570px;
        height: 295px;
        position: relative;

        p {
            font-size: 18px;
            color: #fff;
            word-break: break-all;
        }

        .foot_box {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 36px;
        }

        .buy_btn {
            margin-right: 30px;
            width: 136px;
            height: 36px;
            color: #fff;
            background: #D51423;
            border: none;
            border-radius: 6px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            // position: absolute;
            // bottom: 0px;
            &:hover {
                text-decoration: none;
                color: #fff;
                cursor: pointer;
            }
        }

        .study_num {
            float: right;
            height: 36px;
            line-height: 36px;
            color: #999;
            font-size: 14px;
        }

        .huabei {
            color: #fff;
            font-size: 13px;
            position: absolute;
            bottom: 0;
            padding-left: 25px;

            img {
                width: 17px;
                height: 17px;
                position: absolute;
                left: 0;
            }
        }
    }

    .view_price {
        border-bottom: 1px solid rgb(102, 102, 102);
        padding-bottom: 10px;
        color: rgb(102, 102, 102);
        font-size: 14px;
        margin: 20px 0;

        span {
            font-size: 24px;
            color: #D51423;
            font-weight: bold;
            margin-left: 20px;
        }

        .font_16 {
            font-size: 16px;
            font-weight: 400;
        }

        .set_vip {
            color: #0099FF;
            margin-left: 6px;
        }

        .favo {
            font-size: 10px;
            display: inline-block;
            height: 14px;
            line-height: 14px;
            background: #D51423;
            color: #333;
            padding: 0 8px;
            border-radius: 0 7px 7px 0;
            margin-left: 7px;
        }

        .favo_right {
            background: none;
            border: 1px solid #D51423;
            height: 13px;
            color: #D51423;
            margin-left: -5px;
            border-radius: 7px 0 0 7px;
        }

        .small_favo {
            font-size: 10px;
            border: 1px solid #D51423;
            height: 13px;
            line-height: 14px;
            color: #D51423;
            padding: 0 5px;
        }

        .big_favo {
            color: #999;
            font-size: 14px;
            font-weight: 400;
            margin-left: 3px;
        }
    }

    .detail_view {
        float: left;
        width: 600px;
        height: 295px;
        background: rgb(102, 102, 102);
        background-size: 100%;

        &.float_win {
            position: fixed;
            right: 10px;
            bottom: 30px;
            z-index: 9999;
        }
    }

    .view_teacher {
        color: rgb(102, 102, 102);
        font-size: 14px;

        .text_b {
            margin-right: 20px;
            font-weight: bold;
        }
    }

    /*.modal_body {*/
    /*    height: 262px;*/
    /*    overflow: auto;*/
    /*    font-size: 91%;*/
    /*}*/
    .el-dialog__body {
        padding: 6px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }

    .modal_head[data-v-1ee14d65] {
        line-height: 46px;
        background-color: #f9f9f9;
        text-align: right;
        padding: 0 20px;
    }

    .remark[data-v-1ee14d65] {
        padding: 20px;
        overflow: hidden;
        font-size: 14px;
        border-top: 1px solid #f1f1f1;
    }

    .remark input[data-v-1ee14d65] {
        text-indent: .5em;
        height: 22px;
        width: 338px;
        border: none;
    }

    .pay {
        width: 200px;
        height: 50px;
        border: 1px solid #fff;
        float: left;
        background-repeat: no-repeat;
        background-position: center center;

        &.pay_ali {
            background-image: url();
            margin-left: 20px;


        }

        &.pay_weixin {
            background-image: url();
            margin-left: 0px;

        }
    }

    .modal_body {
        height: 310px;
        overflow: auto;
        font-size: 91%;
        width: 460px;
    }

    .table td {
        vertical-align: middle;
        padding: 19px;
        text-align: center;
        border-bottom: 1px solid #f8f8f8;
    }

    .table {
        width: 95%;
    }

    element.style {
        position: absolute;
        top: 61px;
        left: 175px;
        font-size: 15px;
        color: black;
    }


</style>
